<form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
    <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
    <nz-form-item>
        <nz-form-control nzErrorTip="请输入账号">
            <nz-input-group nzSize="large" nzPrefixIcon="user">
                <input nz-input formControlName="userName" placeholder="请输入账号" />
            </nz-input-group>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-control [nzErrorTip]="passwordTpl">
            <nz-input-group nzSize="large" nzPrefixIcon="lock" [nzSuffix]="passwordShowIcon">
                <input nz-input [type]="showPasswordFlag ? 'text' : 'password'" formControlName="password" placeholder="请输入密码" />
            </nz-input-group>
            <ng-template #passwordShowIcon>
                <ng-container *ngIf="!showPasswordFlag; else disShowPassword">
                    <span nz-icon class="hover-svg" (click)="taggerShowPassword()" nzType="eye-invisible" nzTheme="outline"></span>
                </ng-container>
                <ng-template #disShowPassword>
                    <span nz-icon class="hover-svg" (click)="taggerShowPassword()" nzType="eye" nzTheme="outline"></span>
                </ng-template>
            </ng-template>
            <ng-template #passwordTpl let-control>
                <ng-container *ngIf="control.hasError('maxlength')">密码最大长度为8字符</ng-container>
                <ng-container *ngIf="control.hasError('minlength')">密码最小长度为5字符</ng-container>
                <ng-container *ngIf="control.hasError('required')">请输入密码</ng-container>
            </ng-template>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-control [nzErrorTip]="'请输入验证码'">
            <nz-row [nzGutter]="8">
                <nz-col [nzSpan]="16">
                    <nz-input-group nzSize="large" nzPrefixIcon="key">
                        <input nz-input formControlName="captcha" placeholder="验证码" />
                    </nz-input-group>
                </nz-col>
                <nz-col [nzSpan]="8">
                    <div class="login-code">
                        <img [src]="codeUrl" (click)="getCaptcha()" class="login-code-img" />
                    </div>
                </nz-col>
            </nz-row>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-col [nzSpan]="12">
            <label nz-checkbox formControlName="remember">记住密码</label>
        </nz-col>
    </nz-form-item>
    <nz-form-item>
        <button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock> 登录 </button>
    </nz-form-item>
</form>
